<template>
  <yd-ls-layout title="签到拿积分" :onfoot=false :tolfurl="urls" style="background-color: rgb(255,255,255)">
    <div class="yd-ls-height"></div>
    <div class="yd-ls-sign">
      <div class="yd-ls-circle yd-ls-circle-box">
        <yd-icon name="footmark" size=".9rem" color="#f08080"></yd-icon>
        <p>今日已签</p>
      </div>
      <div class="yd-ls-sign-rule" @click="showRule=true">签到规则</div>
      <div class="yd-ls-sign-line">
        <i class="yd-ls-sign-line-left"></i><span>已连续签到<pre>{{ signDetail.continuity_sign_days }}</pre>天</span><i class="yd-ls-sign-line-right"></i>
      </div>
      <div class="yd-ls-sign-txt">
        {{ signDetail.remark }}
      </div>
    </div>

  <div class="yd-ls-sign-calendar-title">{{getYear}}</div>
    <vue-event-calendar :events="demoEvents"></vue-event-calendar>
    <yd-popup v-model="showRule" position="bottom" height="60%">
      <div class="yd-ls-sign-rule-con">
        <h3>签到规则</h3>
        <div class="yd-ls-sign-rule-txt" v-html="signDetail.sign_rules"></div>
      </div>
      <yd-button bgcolor="#708090" color="#ffffff" style="position: fixed;bottom: 0;width: 100%;" @click.native="showRule = false">知道了</yd-button>
    </yd-popup>
  </yd-ls-layout>
</template>

<script>
import ydLsLayout from '../../../components/yd-ls-layout'
import api from '../../../axios/api'
const r = new Date()
export default {
  data() {
    return {
      urls: 'index.html#/home',
      showRule: false,
      signDetail: {},
      getYear: r.getFullYear() + '-' + (r.getMonth() + 1),
      demoEvents: []
    }
  },
  created() {
    this.urls = `index.html#/${this.$route.query.path}`
    this.getSignDetail()
  },
  methods: {
    getSignDetail() {
      this.$dialog.loading.open(api.default_loading_txt);
      this.axios.get(api.sign_detail)
      .then(m=>{
        this.$dialog.loading.close()
        let sign_data = m.data
        this.signDetail = sign_data.data
        this.demoEvents = sign_data.data.sign_his
      }).catch(err=>{
        this.$dialog.loading.close()
        this.$dialog.alert({mes: '签到详情出错==' + JSON.stringify(err)})
      })
    }
  },
  components: {
    ydLsLayout
  }
}
</script>


<style>
.yd-ls-circle-box {
  position: absolute;
  top: .8rem;
  left: 50%;
  margin-left: -1rem;
}
.yd-ls-circle-box .yd-icon-footmark {
  display: block;
  margin-left: 26px;
  margin-top: 10px;
}
.yd-ls-circle-box p {
  font-size: .32rem;
  color: lightcoral;
  padding-left: 16px;
}

.yd-ls-sign {
  position: relative;
  width:100%;
  height:4.5rem;
  background-image: url('../../../../static/img/signBg.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: auto;
}
.yd-ls-sign-rule {
  background: rgba(255, 255, 255, 0.5);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-size: .30rem;
  width: 1.5rem;
  height: .5rem;
  line-height: .5rem;
  text-align: right;
  padding-right: 5px;
  position: absolute;
  right: 0;
  top: .5rem;
  color: #fff;
}

.yd-ls-sign-line {
  position: relative;
  margin-top: 3rem;
  text-align: center;
}
.yd-ls-sign-line .yd-ls-sign-line-left,
.yd-ls-sign-line .yd-ls-sign-line-right {
  position: relative;
  display: inline-block;
  border-top: 1px solid #fff;
  width: 60px;
  top: -6px;
}
.yd-ls-sign-line span {
  font-size: .35rem;
  color: #fff;
  padding: 5px;
}

.yd-ls-sign-line span pre {
  display: inline-block;
  padding: 0 5px;
  font-size: 0.6rem;
  color: lightcoral;
}

.yd-ls-sign-txt {
  font-size: .3rem;
  color: lightcoral;
  text-align: center;
  padding-top: 5px;
}
.yd-ls-sign-txt span {
  color: lightcoral;
  padding: 0 3px;
}
.yd-ls-sign-calendar-title {
    font-size: .35rem;
    height: 35px;
    line-height: 35px;
    background: linen;
    text-align: center;
}
.yd-ls-sign-rule-con h3 {
  text-align: center;
  font-size: .32rem;
  padding: 10px 0;
}
.yd-ls-sign-rule-con .yd-ls-sign-rule-txt {
  font-size: .3rem;
  line-height: .5rem;
  padding: 0 10px;
}
.yd-ls-sign-rule-con .yd-ls-sign-rule-txt:after {
  content: '';
  display: block;
  height: .7rem;
}
.yd-ls-sign-rule-con .yd-ls-sign-rule-txt dd {
  padding: 5px 0;
}
</style>
